<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时钟</title>
    <link rel="stylesheet" href="./导航栏.css">
    <style>
body{
    background-image: url("分部/首页.jpg");
    background-size: cover;
    background-color: black;
}
.clock{
    width: 300px;
    height: 300px;
    background: white;
    border-radius: 50%;
    border:2px solid white;
    box-shadow: inset 0 0 30px black,0 20px 20px #333,0 0 0 4px white;
    position: relative;
}
.clock .num {
    --rotation: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    transform: rotate(var(--rotation));
    font-size: 1.5rem;
}
.clock .n1 { --rotation: 30deg; }
.clock .n2 { --rotation: 60deg; }
.clock .n3 { --rotation: 90deg; }
.clock .n4 { --rotation: 120deg; }
.clock .n5 { --rotation: 150deg; }
.clock .n6 { --rotation: 180deg; }
.clock .n7 { --rotation: 210deg; }
.clock .n8 { --rotation: 240deg; }
.clock .n9 { --rotation: 270deg; }
.clock .n10 { --rotation: 300deg; }
.clock .n11 { --rotation: 330deg; }
.clock::before{
    content:'';
    width: 15px;
    height: 15px;
    position: absolute;
    z-index: 5;
    background: gray;
    border-radius: 50%;
    left: 48%;
    top: 48%;
}
.clock .hand.second {
    width: 4px;
    height: 45%;
    background-color: pink;
}
  
.clock .hand.minute {
    width: 7px;
    height: 35%;
    background-color: #333;
} 
.clock .hand.hour {
    width: 10px;
    height: 20%;
    background-color: black;
}
  
.clock .hand {
    --rotation: 0;
    position: absolute;
    bottom: 49%;
    left: 50.5%;
    border: 1px solid white;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    transform-origin: bottom;
    z-index: 0;
    transform: translateX(-50%) rotate(calc(var(--rotation) * 1deg));
}
    </style>
</head>
<body>
    <div class="tou">
        <header>
            <ul>
                <li><a href="../首页.html">首页</a></li>
                <li><a href="./计算器.html">计算器</a></li>
                <li><a href="./时钟.html">时钟</a></li>
                <li><a href="https://gitee.com/han-sunian/">仓库</a></li>
            </ul>
        </header>
    </div>
    <div class="clock">
        <div class="hand hour" data-hour-hand></div>
        <div class="hand minute" data-minute-hand></div>
        <div class="hand second" data-second-hand></div>
        <div class="num n1">1</div>
        <div class="num n2">2</div>
        <div class="num n3">3</div>
        <div class="num n4">4</div>
        <div class="num n5">5</div>
        <div class="num n6">6</div>
        <div class="num n7">7</div>
        <div class="num n8">8</div>
        <div class="num n9">9</div>
        <div class="num n10">10</div>
        <div class="num n11">11</div>
        <div class="num n12">12</div>
    </div>
    <script src="./index.js"></script>
</body>
</html>  